<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">

        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="layui-card-silk-pink">
                    <div class="layui-card-header silk-color-light-gray"><i class="fa fa-money icon "></i> 当前余额</div>
                    <span class="layui-badge pull-right layui-bg-silk-deep-pink">实时</span>
                    <div class="layui-card-body">
                        <div style="width: 100%;height:220px; text-align: center;">
                            <h5 class="silk-color-middle-gray" style="margin-top: 130px"> </h5>
                            <p class="silk-color-deep-red-for-room-balance" id="roomBalance" style="margin: 20px 0px 10px 0px; font-size: 60px">218.50</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card-silk-blue">
                    <div class="layui-card-header silk-color-light-gray"><i class="fa fa-pie-chart icon"></i> 支出统计</div>
                    <span class="layui-badge pull-right layui-bg-silk-deep-blue">实时</span>
                    <div class="layui-card-body">
                        <div id="part2" style="width: 100%;min-height:350px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card-silk-yellow">
                    <div class="layui-card-header silk-color-light-gray"><i class="fa fa-pencil icon "></i> 新增记账</div>
                    <div class="layui-card-body">
                        <div id="part3" style="width: 100%;min-height:325px">

                            <div class="layui-form layuimini-form" style="width: 80%; margin-top: 25px">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类型</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="bkType" value="0" title="支出" checked="">
                                        <input type="radio" name="bkType" value="1" title="收入">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">分类</label>
                                    <div class="layui-input-block">
                                        <select name="classification">
                                            <option value="0">水电</option>
                                            <option value="1">餐饮</option>
                                            <option value="2">图书</option>
                                            <option value="3">游玩</option>
                                            <option value="4">电影</option>
                                            <option value="5">其它</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label required">金额</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="bkMoney" name="bkMoney" lay-verify="required" lay-reqtext="金额不能为空"
                                               placeholder="￥" value="" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label required">备注</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="remark" name="remark" lay-verify="required" lay-reqtext="备注不能为空"
                                               placeholder="备注" value="" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="text-align: center;margin-top: 30px;">
                                    <div class="layui-input-block">
                                        <button class="layui-btn layui-btn-normal" style="background-color: yellowgreen" lay-submit lay-filter="saveBtn">记一笔</button>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card-silk-green">
                    <div class="layui-card-header silk-color-light-gray"><i class="fa fa-line-chart icon"></i> 近来走势</div>
                    <div class="layui-card-body">
                        <div id="part4" style="width: 100%;min-height:450px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card-silk-purple">
                    <div class="layui-card-header silk-color-light-gray"><i class="fa fa-list-alt icon "></i>
                        历史账单
                    </div>
                    <div class="layui-card-body">
                        <div id="part5" style="width: 100%;min-height:440px;padding-bottom: 0px">

                            <div class="layuimini-main" style="padding-bottom: 0px;border-bottom: 0px;margin-bottom: 0px">
                                <div style="margin: 10px 10px 10px 10px">
                                    <form class="layui-form layui-form-pane" action="">
                                        <div class="layui-form-item">
<!--                                            <div class="layui-inline">-->
<!--                                                <label class="layui-form-label">金额</label>-->
<!--                                                <div class="layui-input-inline">-->
<!--                                                    <input type="text" name="bkMoney" autocomplete="off" class="layui-input">-->
<!--                                                </div>-->
<!--                                            </div>-->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">备注</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="remark" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>


                                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<script>
    layui.use(['form', 'layer', 'echarts', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            table = layui.table,
            axios = layui.axios,
            echarts = layui.echarts;


        form.render();

        // 1. 获取余额信息
        axios.get('room/query_room_balance').then(function (response) {
            console.log("房间余额：")
            console.log(response.data);
            $('#roomBalance').html('￥' + response.data);
        }).catch(function (error) {
            console.log(error)
        });



        // 2. 当月消费旭日图
        var myRoomExpenditureChart = echarts.init(document.getElementById('part2'));
        var option;

        option = {
            tooltip: {
                formatter: '{b} : {c}'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            series: [{
                name: '本月支出',
                type: 'sunburst',
                radius: [55, '95%'],
                itemStyle: {
                    borderRadius: 7,
                    borderWidth: 2,
                    borderColor: 'rgb(214, 234, 241)'
                },
                label:{
                    show: true
                },
                data: []
            }]
        };

        myRoomExpenditureChart.setOption(option);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            myRoomExpenditureChart.resize();
        }


        const dataString = [{
            name:"水电",
            children:[]
        }, {
            name:"餐饮",
            children:[]
        }, {
            name:"图书",
            children:[]
        }, {
            name:"游玩",
            children:[]
        }, {
            name:"电影",
            children:[]
        }, {
            name:"其它",
            children:[]
        }];
        axios.post('bookkeeping/query_my_room_each_classification_amount').then(function (response) {
            console.log("每类支出的数量：")
            console.log(response.data);

            let claTypeOneAmount = response.data[0];
            let claTypeTwoAmount = response.data[1];
            let claTypeThreeAmount = response.data[2];
            let claTypeFourAmount = response.data[3];
            let claTypeFiveAmount = response.data[4];
            let claTypeSixAmount = response.data[5];

            console.log(claTypeOneAmount, claTypeTwoAmount,claTypeThreeAmount,claTypeFourAmount,claTypeFiveAmount,claTypeSixAmount);

            // 查询房间的所有支出信息
            axios.post('bookkeeping/query_my_room_expenditure').then(function (response) {
                console.log('房间支出信息：')
                console.log(response.data);

                response.data.forEach(item=>{
                    let claTypeOneTempString = [];

                    if (item.classification === 0) {
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[0].children.push(a)
                    }
                    else if(item.classification === 1){
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[1].children.push(a)
                    } else if(item.classification === 2){
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[2].children.push(a)
                    }else if(item.classification === 3){
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[3].children.push(a)
                    }else if(item.classification === 4){
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[4].children.push(a)
                    }else if(item.classification === 5){
                        let a = {}
                        a.name = item.remark;
                        a.value = item.bkMoney;
                        claTypeOneTempString.push(a)
                        dataString[5].children.push(a)
                    }


                    // let dataJson = JSON.parse(dataString);

                    // console.log("旭日图的JSON数据：")
                    // console.log(dataJson)

                    // 将值传入Echarts
                    myRoomExpenditureChart.setOption({
                        series: [{
                            data: dataString
                            // {value: billPaidInfo[0], name: '未缴费'},
                            // {value: billPaidInfo[1], name: '已缴费'},
                            // {value: billPaidInfo[2], name: '拖欠中'},
                        }]
                    });
                });
            }).catch(function (error) {
                console.log(error)
            });
        }).catch(function (error) {
            console.log(error);
        });




        // 3. 新增记账

        // 当前弹出层，防止ID被覆盖
        // let parentIndex = layer.index;

        form.on('submit(saveBtn)', function (data) {
            axios.post('bookkeeping/create', data.field).then(function (response) {
                if(response.code === 200){
                    layer.msg(response.msg);                        // layer的成功提示
                }
                // layer.close(parentIndex);                           // 关闭弹出层
                parent.location.reload();
            }).catch(function (error) {
                layer.msg(error);
            });
            return false;
        });



        // 4. 寝室历史支出走势图
        var echartsRecords = echarts.init(document.getElementById('part4'), 'walden');

        let historyLineRecords = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };


        echartsRecords.setOption(historyLineRecords);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }


        /**
         * @silkTag
         * */
        let seriesList = [
            {
                name: '水电',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '餐饮',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '图书',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '游玩',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '电影',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '其它',
                type: 'line',
                stack: '支出',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]

        let xAxisDataList = []
        axios.get('bookkeeping/query_my_room_each_month_bk_info',{}).then(function (response) {
            console.log('水电')
            console.log(response.data[0])
            console.log('餐饮')
            console.log(response.data[1])
            console.log('图书')
            console.log(response.data[2])
            console.log('游玩')
            console.log(response.data[3])
            console.log('电影')
            console.log(response.data[4])
            console.log('其它')
            console.log(response.data[5])
            console.log('月份')
            console.log(response.data[6])


            console.log(response.data[1].length)

            for(let i=3; i>=0; i--){
                console.log(response.data[1][i])
                seriesList[0].data.push(response.data[0][i])
                seriesList[1].data.push(response.data[1][i])
                seriesList[2].data.push(response.data[2][i])
                seriesList[3].data.push(response.data[3][i])
                seriesList[4].data.push(response.data[4][i])
                seriesList[5].data.push(response.data[5][i])
                xAxisDataList.push(response.data[6][i] + '月')
            }

            console.log('历史月份倒序')
            console.log(xAxisDataList)
            echartsRecords.setOption({
                xAxis: [{
                    data: xAxisDataList
                }],
                series: seriesList
            });
        }).catch(function (error){
            console.log(error)
        })






        // 5. 表单
        table.render({
            elem: '#currentTableId',
            method: 'post',
            url: 'bookkeeping/query_my_room',
            // toolbar: '#toolbarDemo',
            // defaultToolbar: ['filter', 'exports', 'print'],
            defaultToolbar: [],
            cols: [[
                // {type: "checkbox", width: 50},
                {field: 'userId', title: '记账人', templet: '<div>{{d.user.userName}}</div>'},
                {field: 'bkMoney', title: '金额'},
                {field: 'remark', title:'备注'},
                {field: 'bkType', title: '收支', templet: function (row){
                        if (row.bkType === 0){
                            return '<span class="layui-badge layui-bg-silk-light-salmon">支出</span>';
                        } else if (row.bkType === 1){
                            return '<span class="layui-badge layui-bg-silk-yellowgreen">收入✨</span>';
                        }
                    }},
                {field: 'bkTime', minWidth:150, title:'时间', sort:true, templet: function (row) {
                        return '<span class="silk-color-light-gray-for-simple-word">' + row.bkTime + '</span>';
                    }}
            ]],
            limits: [7],
            limit: 7,
            page: true,
            skin: 'line'
        });


        window.reload = function () {
            table.reload('currentTableId');     // 刷新表格
        }


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);

            //执行搜索重载
            table.reload('currentTableId', {
                where: data.field
            }, 'data');

            return false;
        });



    });
</script>
